Zetkin design system

Overview

During my contract with Zetkin—a platform dedicated to organising activism—I was tasked with bringing consistency to a product that had evolved organically over time. Recognising that a unified design system was key to future scalability, I collaborated closely with the team to standardise the product’s look and feel while respecting the existing setup.

This case study outlines my process, key decisions, and the impact of the changes on the user experience.

Research & audit

Since I already had some familiarity with Zetkin, I began by diving deeper into the product’s complexities and user needs through discussions with the tech lead. This groundwork allowed me to:

• Audit existing design patterns.
• Spot inconsistencies.
• Identify opportunities for improvement.

Visual identity refresh

To improve readability and reduce visual fatigue, I updated the product’s visual identity. Key changes included:

• Primary Color Update - Moved from a dominant red to an almost black, providing better readability.
• Data Visualization - Chose purple for data visualization since its neutral symbolism helps distinguish important metrics.
• Incorporating Brand Elements - Inspired by Zetkin's brandbook, I integrated subtle color gradients as backdrops for key modal features and user avatars.

Status systems overhaul

I addressed inconsistencies in two status systems used across the application: Initiative Status and Activist Status.

• Initiative Status:
• • Open/Active → Published: Both "open" and "active" formerly used the green status color. "Open" meant that the item was published and active meant the item is an event and that it is currently undergoing. To minimize confusion, I chose to indicate an event's ongoing status elsewhere and clarify "open" by renaming it to "published."
  • Draft: Changed from gray to yellow to better signal that user attention or action is needed.
  • Cancelled/Closed/Ended: Originally in red (which implied an alert), these were changed to gray to reflect their resting state.
• Activist Status:
• • To eliminate confusion with initiative statuses, I assigned a distinct purple palette as it always accompanied by a metric and often illustrated through graphs.
  • Different shades of purple indicate user action levels:
  • • Blocked: Dark purple (most labor-intensive).
    • Ready: Mid-tone.
    • Done: Light purple (no action required).

Header redesign

The header was a significant pain point. The original design featured:

1. Excessive Height: Over-sized text and a four-row layout that consumed valuable space.
2. Scattered Elements: State-related information and interactive elements were poorly grouped.
3. Poor Mobile Support: The header did not translate well to mobile devices.

My approach:

• Streamlined Layout: Reduced font sizes and consolidated the four rows to reclaim vertical space.
• Enhanced Navigation:
• • Based on user feedback and interaction data, I replaced the standalone breadcrumbs (which occupied a full row) with a custom breadcrumb widget.
  • This widget enables quick navigation to the parent page while offering an expandable panel for full navigation details.
• Visual Grouping: Grouped related elements (e.g., all status items on the right) and used visual cues (such as lighter text and unfilled icons) to differentiate interactive elements from static ones.
• Mobile Optimization: Applied the same design principles to ensure a clean, responsive experience on mobile devices.

Conclusion & lessons learned

The updated design system brought much-needed consistency to Zetkin's interface and laid a solid foundation for future development. User feedback has been positive, and I continue to monitor usage to further refine the system.

Key takeaways:

• Iterative Process: Balancing new design ideas with existing user expectations is crucial.
• Collaboration: Regular feedback from both the team and users was instrumental in shaping effective solutions.
• Continuous Improvement: A design system is always a work in progress—it must evolve as user needs change.

This project not only enhanced the current product but also prepared the platform for scalable, future development.

Below are some screens showcasing some pages with the new design system implemented.